<script lang="ts">
export default {
  name: 'TestTest-twoTest'
}
</script>

<template>
  <h2>Vue3-上机测试（2）</h2>
  <div class="group">
    <h3>测试1 - 任务管理器</h3>
    <Test21></Test21>
  </div>
  <div class="group">
    <h3>测试2 - 用户反馈表单</h3>
    <Test22></Test22>
  </div>
  <div class="group">
    <h3>测试3 - 留言板系统</h3>
    <MessageBoard></MessageBoard>
  </div>
</template>

<script setup lang="ts">
import Test21 from './components/test2-1.vue'
import Test22 from './components/test2-2.vue'
import MessageBoard from './components/MessageBoard.vue'
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
.group3 {
  border: 2px solid rgb(64, 163, 199);
  margin: 10px;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
